import React, { useState,useContext } from 'react'
import { Form, Input, Button, Toast } from 'antd-mobile'
import Header from '../../components/Header/Header'
import { reqlogin } from '../../http/api'
import { MyContext } from '../../App'
import { actions } from '../../reducer/app'

const Login = (props) => {
  const [user, setUser] = useState({
    phone: "",
    password: ""
  })

  const {dispatch} = useContext(MyContext)
  
  const doLogin = () =>{
    reqlogin(user).then(res=>{
      if(res.data.code ===200){
        Toast.show({
          content:res.data.msg
        })
        dispatch(actions.changeUserInfo(res.data.list));
        props.history.push("/index/home")
      }
    })
  }

  return (
    <div className='login'>
      <Header title="登录" register></Header>
      <Form layout='horizontal'>
        <Form.Item label='账号' name='username'>
          <Input placeholder='请输入手机号' clearable onChange={(v) => setUser({...user,phone:v})} />
        </Form.Item>
        <Form.Item label='密码' name='password'>
          <Input placeholder='请输入密码' clearable type='password' onChange={(v) => setUser({...user,password:v})} />
        </Form.Item>
      </Form>
      <p style={{ textAlign: 'center' }}>
        <Button color='warning' size='middle' onClick={() => doLogin()}>登录</Button>
      </p>
    </div>
  )
}

export default Login